<template>
   <!--家庭积分详情-->
    <div class="family_score">
          <Banner></Banner>
          <mainContent catname="积分情况">

            <div slot="menu_list">
              <dl>
                <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">积分情况</dt>
              </dl>
            </div>


            <div slot="inner_content">

              <div class="page_con" style="height: 700px;overflow: hidden;">
               <!--积分情况-->
               <div class="score_detail">
                   <div class="left">
                     <img v-if="homeInfo.heard_img" style="border-radius: 50%;height: 160px;width: 160px;" :src="homeInfo.heard_img" alt="">
                     <img v-else style="border-radius: 50%;height: 160px;width: 160px;" src="../../assets/images/default.png" alt="">
                      <span style="font-size: 40px;color: black;margin-top: 30px;">{{homeInfo.name}}的家庭</span>
                      <span style="font-size: 36px;color: black;margin-top: 30px;">总积分：{{homeInfo.score}}分</span>
                   </div>
                   <div class="right">
                     <div class="scroll_box" v-if="scoreDetailList.length !=0">
                       <vueSeamlessScroll  :data="scoreDetailList" class="seamless-warp" :class-option="classOption">
                         <ul class="item">
                           <li v-for="item in scoreDetailList">
                             <div class="text_list">{{item.desc}}</div>
                           </li>
                         </ul>
                       </vueSeamlessScroll >
                     </div>

                     <div class="nodata" v-else><img src="../../assets/images/nodata/nodata.png" alt=""> </div>

                   </div>
               </div>
               <!--积分情况-->
              </div>
            </div>
          </mainContent>
          <footerBar></footerBar>
          <MainMenu></MainMenu>
    </div>
  <!--家庭积分详情-->
</template>

<script>
    import Banner from '../../components/bannder/Banner'
    import MainMenu from '../../components/mainmenu/MainMenu'
    import footerBar from '../../components/content/footerBar'
    import mainContent from '../../components/content/mainContent'
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        name: "FamilyScore",
        components:{
          Banner,
          MainMenu,
          footerBar,
          mainContent,
          vueSeamlessScroll
        },
        data(){
          return{
            listData: [{
              'title': '小明 于2020-10-19到图书馆学习获得200积分',
            }, {
              'title': '小明 于2020-10-19到某某村民家帮忙获得100积分',
            }, {
              'title': '小明 于2020-10-19不赡养老人被举报扣取2000分',
            }, {
              'title': '小明 于2020-10-19到服务点兑换【玉米油】一壶扣取500分',
            }, {
              'title': '小明 于2020-10-19到服务点兑换【岳西翠兰】一盒扣取500分',
            }, {
              'title': '小明 于2020-10-19到服务点兑换【岳西翠兰】一盒扣取500分',
            }, {
              'title': '小明 于2020-10-19未参加扶贫济困扣取200分',
            }, {
              'title': '小明 于2020-10-19到图书馆学习获得200积分',
            }, {
              'title': '小明 于2020-10-19到图书馆学习获得200积分',
            }],//轮播测试数据
            classOption:{
              step: 0.5,
            },//轮播配置
            scoreDetailList:[],//积分详情列表
            homeInfo:{},//家庭详情
            menu_bg:''
          }
        },
        created(){
          this.menu_bg=this.$util.storage.get("menu_bg");
           this.getHomeScoreDetail();
        },
        methods:{
          getHomeScoreDetail(){
            let code = this.$util.storage.get("code");
            // console.log("code:",code);
            this.$http.get("api/ScreenkApi/getHomeScoreDetail?page=1&limit=10&code="+code,null,r=>{
               console.log("家庭积分详情：",r.data);
               this.scoreDetailList=r.data.data;
               this.homeInfo=r.data.homeInfo;
            });
          },
        }

    }
</script>

<style scoped>
  .family_score{
    width: 100vw;
    height: 1080px;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }
  .score_detail{
    height: 746px;
    width: 98%;
    display: flex;
  }
  .left{
    flex: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .right{
    position: relative;
    flex: 2;
    box-sizing: border-box;
    padding-right: 24px;
  }
  .scroll_box{
    width: 936px;
    height: 628px;
    box-sizing: border-box;
    box-shadow: 2px 2px 16px #ccc;
    margin-top: 60px;
    overflow: hidden;
    border-radius: 10px;
  }
  .seamless-warp {
    background: white;
    height: 100%;
    overflow: hidden;
  }
  .text_list{
    text-align: left;
    font-size: 24px;
    /*overflow: hidden;*/
    color: black;
    /*height: 78px;*/
    padding-left: 30px;
    line-height: 78px;
    border-bottom: 2px solid #ececea;
  }

.nodata{
  width: 633px;
  height: 464px;
  position: absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
</style>
